<!--
 * @Description: 配送方式
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-06-30 16:37:16
 * @FilePath: /yuxiuproweb/src/views/mes/pro/workorder/mods/room/delivery/index.vue
-->
<template>
  <el-collapse-item title="配送方式" name="5" disabled>
    <template slot="title">
      <i
        class="el-icon-circle-plus-outline mr10 expand"
        @click="handleExpand"
      ></i>
      配送方式
    </template>
    <el-form ref="form" :model="form" :rules="rules" inline size="mini">
      <el-table
        v-loading="loading"
        :data="form.list"
        :max-height="500"
        size="mini"
        border
      >
        <el-table-column
          label="发货人"
          align="center"
          prop="consigner"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="consigner">
              <el-input
                style="width: 100%"
                v-model="row.consigner"
                type="text"
                placeholder="请输入发货人"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="发货方式"
          align="center"
          prop="deliveryMethod"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="deliveryMethod">
              <el-input
                style="width: 100%"
                v-model="row.deliveryMethod"
                type="text"
                placeholder="请输入发货方式"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column
          label="加急天数"
          align="center"
          prop="urgentDays"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="urgentDays">
              <el-input
                style="width: 100%"
                v-model="row.urgentDays"
                type="text"
                placeholder="请输入加急天数"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="付款方式"
          align="center"
          prop="paymentMethod"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="paymentMethod">
              <div @click="logistics.show = true">
                <el-input
                  style="width: 100%"
                  v-model="row.paymentMethod"
                  type="text"
                  placeholder="请选择中付款方式"
                  readonly
                />
              </div>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="物流公司"
          align="center"
          prop="logisticsCompany"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="logisticsCompany">
              <div @click="logistics.show = true">
                <el-input
                  style="width: 100%"
                  v-model="row.logisticsCompany"
                  type="text"
                  placeholder="请选择物流公司"
                  readonly
                />
              </div>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column
          label="收件地址"
          align="center"
          prop="address"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="address">
              <el-input
                style="width: 100%"
                v-model="row.address"
                type="text"
                placeholder="请输入收件地址"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="小计"
          align="center"
          prop="subTotal"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="subTotal">
              <el-input
                style="width: 100%"
                v-model="row.subTotal"
                type="text"
                placeholder="请输入小计"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="remark"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="remark">
              <el-input
                style="width: 100%"
                v-model="row.remark"
                type="text"
                placeholder="请输入备注"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="发货地址"
          align="center"
          prop="shipAddress"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="shipAddress">
              <el-input
                style="width: 100%"
                v-model="row.shipAddress"
                type="text"
                placeholder="请输入发货地址"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="80"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleSave(scope.row)"
              v-hasPermi="['md:order:edit']"
              >保存</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <!-- 物流信息 -->
    <logistics-view
      v-if="logistics.show"
      :show.sync="logistics.show"
      @on-change="handleChange"
      @on-clean="handleClean"
    ></logistics-view>
  </el-collapse-item>
</template>

<script>
import { listMethod, updateMethod } from "@/api/asc/delivery";
import LogisticsView from "./logistics.vue";

const FORM = {
  orderDeliveryMethodId: null,
  orderId: null,
  consigner: null,
  deliveryMethod: null,
  urgentDays: null,
  paymentMethod: null,
  logisticsCompany: null,
  address: null,
  subTotal: null,
  remark: null,
  shipAddress: null,
};
export default {
  components: {
    LogisticsView,
  },
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      activeNames: "5",
      loading: false,

      form: {
        list: [{ ...FORM }],
      },
      rules: {},
      logistics: {
        show: false,
      },
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    this.getMethod();
    // this.getMethodList();
    // this.getMachiningList();
  },
  methods: {
    getMethod() {
      listMethod({
        pageNum: 1,
        pageSize: 1,
        orderId: this.data?.proOrderId,
      }).then(({ rows }) => {
        this.form.list = rows || [
          {
            ...FORM,
            orderId: this.data?.proOrderId,
          },
        ];
      });
    },
    handleChange(row) {
      const item = this.form.list[0];
      item.logisticsCompany = row.name;
      item.paymentMethod =
        row.paymentMethod === "0"
          ? "寄付"
          : row.paymentMethod === "1"
          ? "到付"
          : row.paymentMethod === "2"
          ? "包邮"
          : "";
      this.$set(this.form.list, 0, item);
    },
    handleClean() {
      const item = this.form.list[0];
      item.logisticsCompany = "";
      item.paymentMethod = "";
      this.$set(this.form.list, 0, item);
    },
    handleExpand() {
      this.$emit("active", "5", "1");
    },
    // 保存
    handleSave(row = this.form.list[0]) {
      const params = {
        ...row,
      };
      this.loading = true;
      updateMethod(params)
        .then((response) => {
          this.$modal.msgSuccess("保存成功");
          this.getMethod();
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .cell {
    padding-left: 4px;
    padding-right: 4px;
  }
}
.expand {
  cursor: pointer;
}

::v-deep {
  .el-table--border,
  .el-table--group {
    border: 1px solid rgb(150, 150, 150) !important;
  }
  /**
改变表格内竖线颜色
 */
  .el-table--border td,
  .el-table--border th,
  .el-table__body-wrapper
    .el-table--border.is-scrolling-left
    ~ .el-table__fixed {
    border-right: 1px solid rgb(150, 150, 150) !important;
  }
  /**
改变表格内行线颜色
 */
  .el-table td,
  .el-table th.is-leaf,
  .el-table__cell {
    border-bottom: 1px solid rgb(150, 150, 150) !important;
  }
}
</style>
